<template>
	<view>
		<u--form labelPosition="left" :model="product" ref="uForm" labelWidth="140">
			<u-form-item label="默认货品" prop="isDefalut" borderBottom>
				<u-switch slot="right" v-model="product.isDefalut"></u-switch>
			</u-form-item>
			<u-form-item label="图片" prop="" borderBottom>
				<u-upload slot="right" :fileList="fileList" :maxCount="1" maxSize="204800" @delete="deletePic" @afterRead="afterRead" />
			</u-form-item>
			<u-form-item label="货号" prop="sn" borderBottom>
				<u-input v-model="product.sn" border="none" placeholder="请选择品牌" inputAlign="right"></u-input>
			</u-form-item>
			<u-form-item label="重量" prop="weight" borderBottom>
				<u-input v-model="product.weight" border="none" placeholder="自动生成商品编码" inputAlign="right"></u-input>
			</u-form-item>
			<u-form-item label="赠送积分" prop="points" borderBottom>
				<u-input v-model="product.points" border="none" placeholder="请输入" type="digit" inputAlign="right"></u-input>
			</u-form-item>
			<u-form-item label="积分最大可抵金额" prop="pointsDeduction" borderBottom>
				<u-input v-model="product.pointsDeduction" border="none" placeholder="请输入" inputAlign="right"></u-input>
			</u-form-item>
			<u-form-item label="库存" prop="stock" borderBottom>
				<u-input v-model="product.stock" border="none" placeholder="请输入商品排序" inputAlign="right" type="number"></u-input>
			</u-form-item>
			<u-form-item label="销售价" prop="price" borderBottom>
				<u-input v-model="product.price" border="none" placeholder="请输入" type="digit" inputAlign="right"></u-input>
			</u-form-item>
			<u-form-item label="成本价" prop="costprice" borderBottom>
				<u-input v-model="product.costprice" border="none" placeholder="请输入" type="digit" inputAlign="right"></u-input>
			</u-form-item>
			<u-form-item label="市场价" prop="mktprice" borderBottom>
				<u-input v-model="product.mktprice" border="none" placeholder="请输入" type="digit" inputAlign="right"></u-input>
			</u-form-item>
		</u--form>
	</view>
</template>

<script>
	export default {
		data (){
			return {
				fileList: [],
				product:{
					isDefalut: true,
					images:'',
					sn:'',
					weight: 0,
					points: 0,
					pointsDeduction: 0,
					stock: 1000,
					price:0,
					costprice:0,
					mktprice:0,
				}
			}
		},
		watch: {
			product: {
				deep: true, // 深度监听，包括子对象的变化
				handler(newVal){
					this.$emit('update:product', newVal)
				}
			}
		},
		methods: {
			// 删除头像
			deletePic(event) {
				this.fileList.splice(event.index, 1)
				this.form.images = ''
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.$reqUpLoad(lists[i].url)
					let item = this.fileList[fileListLen]
					this.form.images = result.fileUrl
					this.fileList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result.fileUrl
					}))
					fileListLen++
				}
			},
		}
	}
</script>

<style>
</style>